<template>
    <navigation></navigation>
  <div class="overall">
    <div class="content">
    <el-card style="max-width: 1100px;height: 600px;">
    <template #header>
        <el-icon @click="reback" ><DArrowLeft style="cursor: hand;"/></el-icon>
      <div class="card-header">
        <span>{{ competitionInfo.name }}</span>
      </div>
    </template>
    <div class="content-details">
        <div class="up">
            <el-image :src="'http://123.249.101.250:3000/static/'+competitionInfo.face" style="width: 100%; height: 300px"></el-image>
        </div>
        <div class="down">
            <div class="details">
                <span class="details-left">活动介绍：</span><span class="details-right">{{ competitionInfo.comDesc }}</span>
            </div>
            <div class="sponsor">
                <span class="details-left">主办方：</span><span>{{ competitionInfo.sponsor }}</span>
            </div>
            <div class="date">
                <span class="details-left">报名时间：</span><span>{{ competitionInfo.signstartdate }} ~ {{ competitionInfo.signenddate }}</span>
            </div>
            <div>
                <span class="details-left">过程时间：</span><span>{{ competitionInfo.startdate }} ~ {{ competitionInfo.enddate }}</span>
            </div>

        </div>

    </div>
    <template #footer>
        
            <el-button type="success" @click="Submit" style="margin-left: 950px;">申请报名</el-button>
        
    </template>
  </el-card>
  </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ref } from 'vue';
import {DArrowLeft} from '@element-plus/icons-vue'
import router from '@/router';
//获取竞赛id
const route = useRoute();
const id = ref(route.query.id);

//获取竞赛活动详情
const competitionInfo = ref([])
const queryCompetitionInfo = () => {
  fetch(`http://localhost:3000/TbCompetitionActivityController/getCompetitioninfoById/${id.value}`).then(res=>res.json()).then(res=>{
    competitionInfo.value = res.data
    console.log(competitionInfo.value);
  })
}

onMounted(()=>{
    queryCompetitionInfo()
})

const reback = () => {
    router.back()
}

const Submit =()=>{
    if(localStorage.getItem('token')){
     router.push({
    path: '/stusign',
    query:{id:competitionInfo.value.id}
  }).then(()=>{
    window.location.reload()
  })
  }else{
    alert('请先登录！')
  }
}

</script>

<style scoped>

.overall {
    display: flex
}

.content {
    width: 1100px;
    padding-top: 80px;
    margin: auto;
    display: flex;
}

.card-header {
    display: flex;
    width: 1100px;
    height: 5px;
}
.card-header span {
    margin: auto;
}

.details-left {
    font-weight: 700;
    color:deeppink;
}

.sponsor {
    padding-top: 10px;
}

.date {
    padding-top: 5px;
}
</style>